<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title>Canvas</title>
		<link rel="stylesheet" href="../../styles/css/bootstrap.min.css">
		<link rel="stylesheet" href="../../styles/css/metro.css">
		<link rel="stylesheet" href="../../styles/css/bootstrap-dialog.css"/>
		<link rel="stylesheet" href="../../styles/css/easyui.css">
		<link rel="stylesheet" href="../../styles/css/baseCaseEdite.css">
		<link rel="stylesheet" href="../../styles/css/basicContext.min.css">
		<link rel="stylesheet" href="../../styles/css/default.min.css">
		<link href="../../styles/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
		
		<script src="../../jsplugin/jquery.min.js"></script> 
		<script src="../../jsplugin/bootstrap.min.js"></script>
		<script src="../../jsplugin/jquery.ztree.core.js"></script>
		<script src="../../jsplugin/bootstrap-dialog.js"></script>
		<script src="../../jsplugin/jquery.easyui.min.js"></script>
		<script src="../../jsplugin/moment-with-locales.js"></script>
	    <script src="../../jsplugin/bootstrap-datetimepicker.js"></script>
	    <script src="../../jsplugin/bootstrap-datetimepicker.zh-CN.js"></script>
	    <script type="text/javascript" src="../../jsplugin/bootstrap-multiselect.js"></script>
		<link rel="stylesheet" href="../../styles/css/bootstrap-multiselect.css" type="text/css"/>
	    <style>
	    	.basicContext__data {
    			padding-top: 6px;
    			padding-bottom: 6px;
    			text-align: center;
			}
			.externalDiv{
				font-size: 15px;
    			line-height: 35px;
    			padding-left: 5px;
    			background:-webkit-linear-gradient(to right, red, blue); 
                background:linear-gradient(to right,red,blue);
			}
			.multiselect-native-select{
				width:40px !important;
			}
			.multiselect-native-select span{
				width:55px !important;
			}
			button.multiselect.dropdown-toggle.btn.btn-default, .multiselect-item.multiselect-all {
    			background: #161B2F !important;
    			border: 1px solid #53597B !important;
    			border-radius: 0px !important;
    			
			}
			button.multiselect.dropdown-toggle.btn.btn-default{
				padding: 2px 12px 0px 4px !important;
    		    width: 80px;
			}
			.multiselect-container label{
				padding: 3px 20px 3px 18px !important;
			}
			.multiselect-container input{
				width:20px !important;
    			margin-left: -20px !important;
    			margin-top: 4px !important;
			}
			.multiselect-selected-text{
			    overflow: hidden;
			}
			#outParameter .outParameter{
				width: 90%;
    			margin-bottom: 15px;
			}
			.defaultProperty input[type=text]{
		    	color: white;
		    	background: #161B2F;
		    	border: 1px solid #53597B;
			}
			#combinationOperation ul{
			    position: fixed;
			    z-index: 10000;
			    top: auto;
			    left: auto;
			    right: 0px;
			    width: 400px;
			}
			.multiselect-container>li{
			    width: 198px;
			    float: left;
			    display: block;
			}
			#elementNameSearch{
				margin: 3px;
				display: block;
				width: 60%;
				background-color: rgb(12,27,46);
				display: inline-block;
				border: 2px solid #7F7F7F;
				color: #ffffff;
			}
			#btn_elementQuery{
				margin-left:5%;
				width: 30%;
				display: inline-block;
			}
			.baseUl{
			    width: 256px;
   				z-index: 800;
			}
	    </style>
	</head>
	<body>
		<!-- 头部按钮区域 -->
		<div id="header">
			<button id="addBtn">新增</button>
		    <button id="edite" hidden="hidden">保存</button>
		    <button id="submit" hidden="hidden">提交</button>
		    <button id="Audit" hidden="hidden">审核</button>
			<button id="basicInformation" type="button" data-toggle="modal" data-target=".bs-example-modal-md">基本信息</button>
			<button id="emptyElements" hidden="hidden">清空元素</button>
			<button id="deleteElements" hidden="hidden">删除元素</button>
			<button id="backPre" onclick="JavaScript:history.back(-1);">返回</button>
		</div>
		<!-- 内容区域 -->
		<div id="editTheContent">
			<!-- 内容左侧区域 -->
			<div  id="editContentLeft">
				<div class='baseUl'>
					<ul>
						<li id="accordionso" >
							用例元素
						</li>
						<li id="accordionst">
							基本用例
						</li>
					</ul>
				</div>
				<div class='baseList'>
					<div id="basecase" style="display:none;"><!-- 树状图区域 -->
						<ul id="casetree" class="ztree"></ul>
					</div>
					<div class="easyui-accordion" id="easyui" style="background: rgb(12,27,46);"><!-- EasyUI 手风琴效果 -->
						<input type="text" class="form-control" id="elementNameSearch" placeholder="请输入查询名称">
						<button type="button" id="btn_elementQuery" class="btn btn-primary" onclick="showLeftElement()">查询</button>
						<div title="基本控件" style="padding:10px;" id="cd1">
							 <div id="collapseOne">
							   		<ul>
								<div id="myTabContent" >
									<div id="home">
									</div>
								</div>
								</ul> 
							  </div>
						</div>
						<!-- 标题2 -->
						<div title="逻辑控件" style="padding:10px;" id="cd2">
							<div id="collapseTwo">
							   		<ul>
								<div id="myTabContent2" >
									<div id="home2">
									</div>
								</div>
								</ul> 
							  </div>	
						</div>
						<!-- 标题3 -->
						<div title="条件控件" style="padding:10px;" id="cd3">
							<ul id="Graphics"></ul>
						</div>
					</div>
				</div>
				
			</div>
			<!-- 内容中间区域 -->
			<div id="editContentCenter" onkeydown="keydown(event)" onkeyup="keyup(event)" tabIndex = "-1" contenteditable = "true">
				<div>
					<div id='canvasDiv' style="overflow: auto;height: 750px;width: 705px;float: left;">
						<!-- 画布区域 -->
						<canvas id="canvasId" height="750px" width="705px" z-index="-1">
						</canvas>
					</div>
				</div>
				
				<!-- 操作区域 -->
<!-- 				<div id="caozuo"> -->
<!-- 					<h4></h4> -->
<!-- 					<p id="operationInformation"></p> -->
<!-- 				</div> -->
			</div>
			<!-- 内容右侧区域 -->
			<div id="shuxing">
				<div id="shuxingContent">
					<div id="caseNamee" class='externalDiv'>
						控件属性区域
					</div>
					<div id="combinationOperation">
						<div id="controlProperties">
							<!-- 存放可修改的属性 -->
							<div id="elementContents">
							</div>
						</div>
					</div>
				</div>
				<!-- 外部参数区域 -->
				<div id="externalParameter">
					<div class='externalDiv'>
						外部参数
					</div>
					<div id="outParameter">
					</div>
				</div>	
				<!-- 控件说明区域 -->
				<div id="controlDescription">
					<div class='externalDiv'>
						控件说明描述
					</div>
					<div id="conDescription">
					</div>
				</div>
			</div>
		</div>
		<!-- data-backdrop="false"去除遮罩层  -->
		<div class="modal fade bd-example-modal-sm"  id="myModal" role="dialog" data-backdrop="false"  aria-hidden="true" style='top:300px;bottom:30px;pointer-events: none;'>
		    <div class="modal-dialog modal-sm">
		        <div class="modal-content" style='background-color:#161b2f;'>
		            <p class="text-center mb-0" style='margin-top:15px;'>
		                <i class="fa fa-check-circle text-success mr-1" aria-hidden="true" id='alertText' style='color:#ffffff;'></i>
		                
		            </p>
		        </div>
		    </div>
		</div>
	<script src="../../common/myAlert.js"></script>
	<script src="../../common/userRole.js"></script>
	
	<script src="../../casemanager/js/caseEditeUtil.js"></script>
	<script src="../../casemanager/js/TDraw.js"></script>
	<script src="../../casemanager/js/TDrawCanvas.js"></script>
	<script src="../../casemanager/js/baseCommon.js"></script>
	<script src="../../casemanager/js/baseCaseEdite.js"></script>
	<script src="../../casemanager/js/basicContext.min.js"></script>
	</body>
</html>